<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="套餐名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="套餐分类" prop="categoryId">
        <el-select v-model="ruleForm.categoryId" placeholder="请选择套餐分类">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="套餐价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>

      <el-form-item label="套餐菜品" prop="setmealDishes" style="width: 777px">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="dialogTableVisible = true"
          >添加菜品</el-button
        >
        <el-table
          v-if="ruleForm.setmealDishes.length"
          :data="ruleForm.setmealDishes"
          style="width: 100%"
        >
          <el-table-column prop="name" label="名称" width="130">
          </el-table-column>
          <el-table-column prop="price" label="价钱" width="130">
          </el-table-column>
          <el-table-column label="份数" width="286.2">
            <template v-slot="{ row }">
              <el-input-number v-model="row.copies" :min="1"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130">
            <template slot-scope="scope">
              <el-link type="danger" @click="handledel(scope.row)">
                删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="套餐图片" prop="image">
        <el-upload
          class="avatar-uploader"
          :action="`${env}/common/upload`"
          list-type="picture-card"
          :on-success="handleSuccess"
          :limit="1"
          :show-file-list="false"
        >
          <img
            v-if="ruleForm.image"
            :src="`${env}/common/download?name=${ruleForm.image}`"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="套餐描述" prop="description">
        <el-input type="textarea" v-model="ruleForm.description"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="$router.push({ name: 'Setmenu' })">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="添加菜品" :visible.sync="dialogTableVisible">
      <div class="menu-transfer">
        <el-menu class="menu-transfer-1">
          <el-menu-item
            :index="item.id"
            v-for="item of menuData"
            :key="item.id"
            @click="handleGetDishListByCategoryId(item)"
          >
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
        <el-transfer
          v-model="transferValueData"
          :data="transferData"
          :titles="['菜品', '已选菜品']"
          :props="{
            key: 'id',
            label: 'name',
          }"
        ></el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSure()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategoryName,
  getSetmenuCategoryName,
  getDishListByCategoryIdId,
  addSetmenu,
  editSetmenu,
  getSetmenuById,
} from "@/api/setmenu";
export default {
  data() {
    return {
      tableData: [],
      options: [],
      env: process.env.VUE_APP_BASE_API,
      ruleForm: {
        categoryId: "",
        code: "",
        description: "",
        dishList: [],
        idType: "",
        image: "",
        name: "",
        price: "",
        setmealDishes: [],
        status: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
        categoryId: [{ required: true, trigger: "blur" }],
        price: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        image: [{ required: true, trigger: "change" }],
      },
      dialogTableVisible: false,
      input: "",
      menuData: [],
      transferData: [],
      transferDataAll: [],
      transferValueData: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.isEdit) {
        getSetmenuById(this.$route.query.id).then((res) => {
          this.ruleForm = res.data;
        });
      }
      getSetmenuCategoryName().then((res) => {
        this.options = res.data;
      });
      getCategoryName().then((res) => {
        this.menuData = res.data;
      });
    },
    handledel(row) {
      console.log(row);
    },
    handleSave() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            await editSetmenu(this.ruleForm);
          } else {
            const data = {
              ...this.ruleForm,
              setmealDishes: this.ruleForm.setmealDishes.map((item) => {
                return {
                  copies: item.copies,
                  dishId: item.id,
                  name: item.name,
                  price: item.price,
                };
              }),
            };
            await addSetmenu(data);
          }
          this.$message.success("保存成功");
          this.$router.push({ name: "Dishes" });
        } else {
          return false;
        }
      });
    },
    handleSure() {
      this.ruleForm.setmealDishes = this.transferDataAll.filter((item) => {
        return this.transferValueData.includes(item.id);
      });
      this.dialogTableVisible = false;
    },
    handleSuccess(response, file, fileList) {
      this.ruleForm.image = response.data;
    },
    handleGetDishListByCategoryId(item) {
      getDishListByCategoryIdId({ categoryId: item.id }).then((res) => {
        this.transferDataAll = [...this.transferDataAll, ...res.data];
        this.transferData = res.data;
      });
    },
  },
  computed: {
    isEdit() {
      return this.$route.query.isEdit === "true";
    },
  },
};
</script>
<style>
.el-form {
  width: 500px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.menu-transfer {
  display: flex;
}
.menu-transfer-1 {
  width: 130px;
  height: 400px;
  overflow: scroll;
}
</style>
